<template>
<!-- 第三个页面 -->
  <div class="sear">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" title="综合" disabled/>
      <van-dropdown-item v-model="value1" :options="option1" title="价格" @change="priceChange"/>
      <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="categoryChange"/>
    </van-dropdown-menu>

    <!-- 产品为空的时候的处理 -->
    <van-empty description="没有内容"  v-if="produ.length==0"/>
    <Products :produ='produ' v-else/>
  </div>
</template>

<script>
import Products from '../Products'
export default {
  components:{
  Products
  },
  props:['produ','filterCategory'],
  beforeUpdate(){
     this.filterCategory.map(item=>{
       if(item.checked){
         this.value2=item.value
     
       }
     })
  },
  methods:{
  categoryChange(value){
     this.$emit('categoryChange',value)
   },
   priceChange(value){
      this.$emit('priceChange',value)
   }
  },
  data() {
    return {
       imgSrc:require("@/assets/logo.png"),
      value1: 0,
      value2: 'a',
      
      option1: [
        { text: '由高到低', value: 'desc' },
        { text: '由低到高', value: 'asc' },
      ],
      // option2: [
      //   { text: '默认排序', value: 'a' },
      //   { text: '好评排序', value: 'b' },
      //   { text: '销量排序', value: 'c' },
      // ],
    };
  },
};
</script>
 
<style lang = "less" scoped>
.sear{
   z-index: 100;
  padding-bottom: 40px;
}
</style>